<template>
  <div class="books">
    <el-row :gutter="20">
      <el-col :span="12">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="书名">
        <el-input v-model="formInline.bookname" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchByBook">查询</el-button>
      </el-form-item>
      <el-form-item v-if="role!=='user'">
        <el-button type="primary" @click="addNewBook">添加新书</el-button>
      </el-form-item>
    </el-form>
        <el-table :data="tableData" style="width: 100%" :row-style="{ height: '50px' }">
          <el-table-column prop="name" label="书名" width="220"></el-table-column>
          <el-table-column prop="author" label="作者" width="120"></el-table-column>
          <el-table-column prop="totalCopies" label="书册总数" width="130"></el-table-column>
          <el-table-column prop="availableCopies" label="剩余数量" width="130"></el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button size="mini" @click="borrowBook(scope.row)" type="success">借书</el-button>
            </template>
          </el-table-column>
        </el-table>
    </el-col>
      <el-col :span="12">
        <el-card>
          <div class="chat-box" ref="chatBox">
            <div v-for="(msg, index) in messages" :key="index" class="message">
              <div v-if="msg.type === 'user'" class="user-message">
                <i class="el-icon-user-solid"></i>
                <div class="message-content user-message-content">{{ msg.content }}</div>
              </div>
              <div v-if="msg.type === 'bot'" class="bot-message">
                 <i class="el-icon-service"></i>
                <div class="message-content bot-message-content">{{ msg.content }}</div>
              </div>
            </div>
          </div>
          <div class="input-area">
            <el-input
                v-model="input"
                placeholder="请输入您的问题..."
                @keyup.enter.native="sendMessage"
                class="input-field"
                :style="{ maxWidth: 'calc(100% - 100px)' }"
            ></el-input>
            <el-button type="primary" @click="sendMessage">发送</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog title="新增书籍" :visible.sync="dialogVisible" width="30%">
      <el-form :model="newBookForm" label-width="80px">
        <el-form-item label="书名">
          <el-input v-model="newBookForm.name"></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="newBookForm.author"></el-input>
        </el-form-item>
        <el-form-item label="总数量">
          <el-input-number v-model="newBookForm.total_copies" :min="1"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitNewBook">确 定</el-button>
  </span>
    </el-dialog>
  </div>



</template>

<script>


import {borrowBook, chat, getBookList, searchByBook, submitNewBook} from "@/api/app";

export default {
  name: 'BooksView',
  inject: ['commonData'],
  data() {
    return {
      uid:this.commonData.uid,
      role:this.commonData.role,
      dialogVisible: false,
      newBookForm: {
        name: '',
        author: '',
        total_copies: 1,
      },
      input: '',
      messages: [],
      tableData: [{}],
      formInline: {
        bookname: ''
      }
    }
  },
  methods: {
    sendMessage() {
      console.log('消息:', this.input)
      if (this.input.trim() === '') return;

      this.messages.push({ type: 'user', content: this.input });
      const userInput = this.input;
      this.input = '';

      chat(userInput).then(res =>{
          const answer=res.data.msg;
        setTimeout(() => {
          this.messages.push({ type: 'bot', content: answer+'\n'});
          this.scrollToBottom();
        }, 500);
        this.getPage();
      });


      this.scrollToBottom();
    },
    scrollToBottom() {
      this.$nextTick(() => {
        this.$refs.chatBox.scrollTop = this.$refs.chatBox.scrollHeight;
      });
    },
    getPage() {
      getBookList(this.formInline).then(res => {
        console.log(res)
        this.tableData = res.data.list
      })
    },
    borrowBook(row) {
      console.log(row)
      borrowBook(row,this.uid).then(() => {
        this.getPage()
      })
    },
    searchByBook() {
      searchByBook(this.formInline.bookname).then(res => {
        this.tableData = res.data.list
      });
    },
    addNewBook() {
      this.dialogVisible = true;
    },
    submitNewBook() {
      console.log(this.newBookForm)
      submitNewBook(this.newBookForm).then(res => {
        console.log(res)
        this.dialogVisible = false;
        this.getPage()
      })

    }
  },
  created() {
    this.getPage()
    this.messages.push({ type: 'bot', content: '欢迎使用智能图书馆管理系统'+'\n'})
  }

}
</script>
<style scoped>
.message-content {
  max-width: 70%;
  background-color: #f0f0f0;
  border-radius: 10px;
  padding: 10px 15px;
  margin-left: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.user-message-content {
  background: linear-gradient(to right, #a8edea, #fed6e3);
  align-self: flex-end;
  text-align: right;
}

.bot-message-content {
  background: linear-gradient(to right, #cfe2ff, #d1e7dd);
  align-self: flex-start;
  text-align: left;
}
.el-form-item__content .el-input,
.el-form-item__content .el-input-number {
  transition: border-color 0.3s ease;
}
.el-form-item__content .el-input:focus .el-input__inner,
.el-form-item__content .el-input-number:focus .el-input__inner {
  border-color: #409EFF;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #f5f7fa;
}
.chat-box {
  height: 60vh;
  overflow-y: auto;
  padding: 10px;
  border-bottom: 1px solid #dcdfe6;
}
.books {
  padding: 20px;
}
.el-card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
.input-area {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.message {
  margin: 10px 0;
  display: flex;
  align-items: center;
}
.user-message, .bot-message {
  margin-top: 2px;
  display: flex;
  align-items: center;
}

.input-field {
  flex: 1;
  margin-right: 10px;
  max-width: calc(100% - 100px);
}
.message-content {
  max-width: 100%; /* 确保消息内容框不超过聊天框宽度 */
  background-color: #f0f0f0; /* 随意选择背景颜色 */
  border-radius: 5px; /* 圆角 */
  padding: 10px; /* 内边距 */
  overflow-wrap: break-word; /* 使长文本换行 */
  white-space: normal; /* 允许文本在标签内换行 */
  word-wrap: break-word; /* 兼容旧版浏览器 */
}
.user-message-content {
  background-color: #d1e7dd; /* 用户消息的背景颜色 */
  text-align: left;
}
.bot-message-content {
  background-color: #cfe2ff; /* 机器人消息的背景颜色 */
  text-align: left;
}
</style>